<template>
  <el-dialog
    top="30px"
    width="700px"
    title="风险金登记"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <div v-loading="loading">
      <div class="d-flex align-items-center py-2">
        <div class="item-label">是否缴纳风险金：</div>
        <div class="flex-1">
          <span v-if="viewMode">{{ { 0: '否', 1: '是' }[relatedData.is_risk_funds] || '-' }}</span>
          <el-radio-group v-else v-model="relatedData.is_risk_funds">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </div>
      </div>
      <template v-if="+relatedData.is_risk_funds === 1">
        <div class="d-flex align-items-center py-2">
          <div class="item-label">
            <span v-if="!viewMode" class="text-danger">*</span>
            风险类型：
          </div>
          <div class="flex-1">
            <span v-if="viewMode">
              {{ enumRiskType[riskData.risk_type] || '-' }}
            </span>
            <c-select
              v-else
              v-model="riskData.risk_type"
              :options="enumRiskType"
              placeholder="风险类型"
              class="form-control-ml"
            ></c-select>
          </div>
        </div>
        <div class="d-flex align-items-center py-2" v-if="+riskData.risk_type === 3">
          <div class="item-label">风险类型描述：</div>
          <div class="flex-1">
            <span v-if="viewMode">{{ riskData.risk_type_remark || '-' }}</span>
            <el-input
              clearable
              v-else
              class="form-control-ml"
              v-model="riskData.risk_type_remark"
              placeholder="风险类型描述"
            ></el-input>
          </div>
        </div>

        <div class="d-flex align-items-center py-2">
          <div class="item-label">
            <span v-if="!viewMode" class="text-danger">*</span>
            缴纳比例：
          </div>
          <div class="flex-1">
            <span v-if="viewMode">{{ riskData.pay_rate || '-' }} %</span>
            <el-input
              placeholder="缴纳比例"
              v-else
              v-input-number="{ min: 0, max: 100, fixed: 2 }"
              @change="setRiskFunds"
              v-model="riskData.pay_rate"
              class="form-control-ml"
            >
              <span slot="append">%</span>
            </el-input>
          </div>
        </div>

        <div class="d-flex align-items-center py-2">
          <div class="item-label">
            <span v-if="!viewMode" class="text-danger">*</span>
            应缴纳金额：
          </div>
          <div class="flex-1">
            <span v-if="viewMode">{{ riskData.pay_funds || '-' }} 万元</span>
            <el-input
              placeholder="应缴纳金额"
              v-else
              v-input-number="{ min: 0, fixed: 4 }"
              v-model="riskData.pay_funds"
              class="form-control-ml"
            >
              <span slot="append">万元</span>
            </el-input>
          </div>
        </div>

        <div class="d-flex align-items-center py-2">
          <div class="item-label">
            <span v-if="!viewMode" class="text-danger">*</span>
            实际缴纳金额：
          </div>
          <div class="flex-1">
            <span v-if="viewMode">{{ riskData.pay_funds_actual || '-' }} 万元</span>
            <el-input
              placeholder="实际缴纳金额"
              v-else
              v-input-number="{ min: 0, fixed: 4 }"
              v-model="riskData.pay_funds_actual"
              class="form-control-ml"
            >
              <span slot="append">万元</span>
            </el-input>
          </div>
        </div>

        <div class="d-flex align-items-center py-2">
          <div class="item-label">备注：</div>
          <div class="flex-1">
            <span v-if="viewMode">{{ riskData.remark || '-' }}</span>
            <el-input
              type="textarea"
              rows="3"
              v-else
              class="form-control-ml"
              v-model="riskData.remark"
              placeholder="备注"
            ></el-input>
          </div>
        </div>
      </template>
      <div class="d-flex align-items-center py-2" v-if="!viewMode">
        <div class="item-label"></div>
        <div class="flex-1">
          <el-button @click="submit" type="primary" :loading="submitLoading" class="btn-long">
            保存
          </el-button>
          <el-button @click="beforeClose" class="btn-long">取消</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { enumRiskType } from '@/bigcredit/views/settle/risk/enum'
import { mul, div } from '@vimi/utils-tool'
export default {
  components: {},
  props: {
    visible: Boolean,
    viewMode: Boolean,
    queryId: String,
  },
  data() {
    return {
      enumRiskType,
      riskData: {},
      relatedData: {},
      loading: false,
      submitLoading: false,
      rules: {},
    }
  },
  computed: {},
  watch: {
    visible: {
      handler: function () {
        if (this.visible) {
          this.getData()
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    submitRisk() {
      this.riskData.customer_related_id = this.queryId
      if (!this.riskData.id) {
        return this.$api.addData(this.$serviceName, 'risk_funds', this.riskData)
      } else if (+(this.relatedData.is_risk_funds || '') === 0) {
        return this.$api.deleteData(this.$serviceName, 'risk_funds', this.riskData.id)
      } else {
        return this.$api.updateData(
          this.$serviceName,
          'risk_funds',
          this.riskData.id,
          this.riskData
        )
      }
    },
    submit() {
      if (!this.riskValidator()) {
        return
      }
      this.submitLoading = true
      this.$api
        .updateData(this.$serviceName, 'customer_related', this.relatedData.customer_related_id, {
          is_risk_funds: this.relatedData.is_risk_funds,
        })
        .then(() => {
          return this.submitRisk()
        })
        .then(() => {
          this.getData()
          this.$message.success('保存成功')
          this.$emit('success', true)
          this.beforeClose()
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || `操作失败，请重试！`)
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    riskValidator() {
      if (+(this.relatedData.is_risk_funds || '') === 0) {
        return true
      }
      const validatorObject = {
        risk_type: '请选择风险类型',
        pay_rate: '请输入缴纳比例',
        pay_funds: '请输入应缴金额',
        pay_funds_actual: '请输入实际缴纳金额',
      }
      for (let key of Object.keys(validatorObject)) {
        if (!this.riskData[key] && this.riskData[key] !== 0) {
          this.$message.warning(validatorObject[key])
          return false
        }
      }
      return true
    },
    setRiskFunds() {
      this.riskData.pay_funds =
        div(mul(this.relatedData.approved_funds, this.riskData.pay_rate), 100) || 0
    },
    async getData() {
      this.loading = true
      if (!this.queryId) {
        return
      }
      await this.getRiskData()
      this.$api
        .getDataFromId(this.$serviceName, 'customer_related', this.queryId)
        .then(res => {
          this.relatedData = res?.data ?? {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    getRiskData() {
      return this.$api
        .getData(
          this.$serviceName,
          'risk_funds',
          { 'customer_related_id.eq': this.queryId },
          { create_time: 'desc' }
        )
        .then(res => {
          this.riskData = res?.data?.[0] ?? { pay_funds: '' }
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.item-label {
  width: 130px;
  padding: 5px 1px;
}
</style>
